<input type="hidden" id="node-input-version" />
<input type="hidden" id="node-input-outputs" />

<div class="form-row">
    <label
        for="node-input-name"
        data-i18n="server-state-changed.label.name"
    ></label>
    <input type="text" id="node-input-name" />
</div>

<div class="form-row">
    <label
        for="node-input-server"
        data-i18n="server-state-changed.label.server"
    ></label>
    <input type="text" id="node-input-server" />
</div>

<div class="form-row">
    <div id="entity-list"></div>
</div>

<div class="form-row">
    <label
        for="node-input-ifState"
        data-i18n="server-state-changed.label.if_state"
    ></label>
    <select id="node-input-ifStateOperator" style="width: 20%">
        <option
            value="is"
            data-i18n="server-state-changed.label.if_state_option.is"
        ></option>
        <option
            value="is_not"
            data-i18n="server-state-changed.label.if_state_option.is_not"
        ></option>
        <option
            value="lt"
            data-i18n="server-state-changed.label.if_state_option.less_than"
        ></option>
        <option
            value="lte"
            data-i18n="server-state-changed.label.if_state_option.less_than_or_equal_to"
        ></option>
        <option
            value="gt"
            data-i18n="server-state-changed.label.if_state_option.greater_than"
        ></option>
        <option
            value="gte"
            data-i18n="server-state-changed.label.if_state_option.greater_than_or_equal_to"
        ></option>
        <option
            value="includes"
            data-i18n="server-state-changed.label.if_state_option.includes"
        ></option>
        <option
            value="does_not_include"
            data-i18n="server-state-changed.label.if_state_option.does_not_include"
        ></option>
        <option
            value="jsonata"
            data-i18n="server-state-changed.label.if_state_option.jsonata"
        ></option>
    </select>
    <input type="text" id="node-input-ifState" style="width: 50%" />
    <input type="hidden" id="node-input-ifStateType" />
</div>

<div class="form-row">
    <label
        for="node-input-for"
        data-i18n="server-state-changed.label.for"
    ></label
    >&nbsp;

    <div class="ha-multi-item-row">
        <input type="text" id="node-input-for" />

        <input type="hidden" id="node-input-forType" />

        <select id="node-input-forUnits">
            <option
                value="milliseconds"
                data-i18n="server-state-changed.label.for_option.milliseconds"
            ></option>

            <option
                value="seconds"
                data-i18n="server-state-changed.label.for_option.seconds"
            ></option>

            <option
                value="minutes"
                data-i18n="server-state-changed.label.for_option.minutes"
            ></option>

            <option
                value="hours"
                data-i18n="server-state-changed.label.for_option.hours"
            ></option>

            <option
                value="days"
                data-i18n="server-state-changed.label.for_option.days"
            ></option>
        </select>
    </div>
</div>

<div class="form-row checkbox-option">
    <input type="checkbox" id="node-input-outputInitially" />
    <label
        for="node-input-outputInitially"
        data-i18n="server-state-changed.label.output_on_connect"
    ></label>
</div>

<div class="form-row">
    <p
        data-i18n="server-state-changed.label.ignore_state_change_event_when"
    ></p>
    <ul class="ha-ignore-state">
        <li>
            <input type="checkbox" id="node-input-ignorePrevStateNull" />
            <label
                for="node-input-ignorePrevStateNull"
                data-i18n="server-state-changed.label.ignore_prev_state_null"
            >
            </label>
        </li>
        <li>
            <input type="checkbox" id="node-input-ignorePrevStateUnknown" />
            <label
                for="node-input-ignorePrevStateUnknown"
                data-i18n="server-state-changed.label.ignore_prev_state_unknown"
            >
            </label>
        </li>
        <li>
            <input type="checkbox" id="node-input-ignorePrevStateUnavailable" />
            <label
                for="node-input-ignorePrevStateUnavailable"
                data-i18n="server-state-changed.label.ignore_prev_state_unavailable"
            >
            </label>
        </li>
        <li>
            <input type="checkbox" id="node-input-ignoreCurrentStateUnknown" />
            <label
                for="node-input-ignoreCurrentStateUnknown"
                data-i18n="server-state-changed.label.ignore_current_state_unknown"
            >
            </label>
        </li>
        <li>
            <input
                type="checkbox"
                id="node-input-ignoreCurrentStateUnavailable"
            />
            <label
                for="node-input-ignoreCurrentStateUnavailable"
                data-i18n="server-state-changed.label.ignore_current_state_unavailable"
            >
            </label>
        </li>
        <li>
            <input type="checkbox" id="node-input-outputOnlyOnStateChange" />
            <label
                for="node-input-outputOnlyOnStateChange"
                data-i18n="server-state-changed.label.output_only_on_state_change"
            >
            </label>
        </li>
    </ul>
</div>

<div class="form-row"><ol id="custom-outputs"></ol></div>

<div class="form-row" id="exposed-as-row">
    <label
        for="node-input-exposeAsEntityConfig"
        data-i18n="ha-tag.label.expose_as"
    ></label>
    <input type="text" id="node-input-exposeAsEntityConfig" />
</div>
